<template>
  <div class='container'>
    <!-- 基础题库 -->
    <el-card>
      <div slot='header' style="overflow: hidden;">
        <el-button type="success" @click='addQuestion' icon="el-icon-edit" size="small" style="float: right;" >新增试题</el-button>
      </div>
      <!-- 搜索区 -->
      <el-form :model='questionsData' ref='questionsForm'>
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px">
              <el-select placeholder="请选择" style="width: 100%;" v-model="questionsData.subjectID" @change="subjectChange">
                  <el-option
                    v-for="item in subjectList"
                    :key='item.id'
                    :value="item.id"
                    :label='item.subjectName'>
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px">
              <el-select placeholder="请选择" style="width: 100%;" v-model="questionsData.catalogID">
                  <el-option
                    v-for="item in directoryList"
                    :key='item.id'
                    :value="item.id"
                    :label='item.directoryName'>
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" label-width="80px">
               <el-select
                   placeholder="请选择"
                   v-model="tagStr"
                   multiple
                   :multiple-limit='2'
                   style="width: 100%;"
                   >
                   <el-option
                     v-for="item in tagsList"
                     :key='item.id'
                     :value="item.tagName"
                     :label='item.tagName'>
                   </el-option>
                 </el-select>
             </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px">
               <el-input v-model="questionsData.keyword" placeholder="请输入内容"></el-input>
             </el-form-item>
          </el-col>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="80px">
               <el-select placeholder="请选择" style="width: 100%;" clearable v-model="questionsData.questionType">
                   <el-option
                     v-for="item in questionType"
                     :key='item.value'
                     :value="item.value.toString()"
                     :label='item.label'>
                   </el-option>
                 </el-select>
             </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px">
               <el-select placeholder="请选择" style="width: 100%;" clearable v-model="questionsData.difficulty">
                   <el-option
                     v-for="item in difficulty"
                     :key='item.value'
                     :value="item.value.toString()"
                     :label='item.label'>
                   </el-option>
                 </el-select>
             </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" label-width="80px">
               <el-select placeholder="请选择" style="width: 100%;" clearable v-model="questionsData.direction">
                   <el-option
                     v-for="item in direction"
                     :key='item'
                     :value="item"
                     :label='item'>
                   </el-option>
                 </el-select>
             </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px">
               <el-select placeholder="请选择" style="width: 100%;" v-model="questionsData.creatorID">
                   <el-option
                     v-for="item in creator"
                     :key='item.id'
                     :value="item.id"
                     :label='item.username'>
                   </el-option>
                 </el-select>
             </el-form-item>
          </el-col>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="80px">
               <el-input placeholder="请输入内容" v-model="questionsData.remarks"></el-input>
             </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px">
               <el-input placeholder="请输入内容" v-model="questionsData.shortName"></el-input>
             </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市" label-width="80px">
              <el-col :span="11">
                <!-- 省 -->
                <el-form-item>
                  <el-select placeholder="请选择" clearable v-model="questionsData.province" @clear="provincesClear" @change="provinceChange">
                      <el-option
                        v-for="item in provinces"
                        :key='item'
                        :value="item"
                        :label='item'>
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
              </el-col>
              <el-col :span="11" style="float: right;">
                <!-- 市 -->
                <el-form-item>
                  <el-select placeholder="请选择" clearable v-model="questionsData.city">
                      <el-option
                        v-for="item in citys"
                        :key='item'
                        :value="item"
                        :label='item'>
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <!-- 按钮区 -->
          <el-col :span="6">
            <el-form-item label-width="80px" size="mini" style="text-align: right;">
              <el-button size="small" @click='reset'>清除</el-button>
              <el-button size="small" type="primary" @click='searchQuestion'>搜索</el-button>
             </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示文案 -->
       <el-alert
          v-if='total > 0'
          :title="'数据一共' + total + '条'"
          type="info"
          show-icon
          :closable="false">
        </el-alert>
        <el-alert
           v-else
           title="一条数据也没有!!!"
           type="info"
           show-icon
           :closable="false">
         </el-alert>
      <!-- 题型搜索结果区 -->
      <el-table
            v-loading="tbLoading"
            :data="questionsTbData"
            style="width: 100%; margin-top: 20px;">
            <el-table-column
              prop="number"
              label="试题编号"
              width="140">
            </el-table-column>
            <el-table-column
              prop="subject"
              label="学科">
            </el-table-column>
            <el-table-column
              prop="catalog"
              label="目录">
            </el-table-column>
            <el-table-column
              prop="questionType"
              label="题型">
              <template slot-scope='scope'>
                {{scope.row.questionType === '1' ? '单选' : (scope.row.questionType === '2' ? '多选' : '简答')}}
              </template>
            </el-table-column>
            <el-table-column
              label="题干"
              width="180">
              <template slot-scope='scope'>
                <div v-html='scope.row.question'></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              width="160">
              <template slot-scope='scope'>
                {{scope.row.addDate | parseTimeByString}}
              </template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              label="难度">
              <template slot-scope='scope'>
                {{scope.row.difficulty === '1' ? '简单' : (scope.row.difficulty === '2' ? '一般' : '困难')}}
              </template>
            </el-table-column>
            <el-table-column
              prop="creator"
              label="录入人">
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">
              <template slot-scope='scope'>
                <!-- 预览 -->
                <el-button size='small' @click='previewQuestion(scope.row)' type="primary" plain icon="el-icon-view" circle></el-button>
                <!-- 编辑 -->
                <el-button size='small' @click='editQuestion(scope.row.id)' type="success" plain icon="el-icon-edit" circle></el-button>
                <!-- 删除 -->
                <el-button size='small' @click='delQuestion(scope.row)' type="danger" plain icon="el-icon-delete" circle></el-button>
                <!-- 加入精选 -->
                <el-button size='small' @click='addFine(scope.row.id)' type="warning" plain icon="el-icon-check" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 试题预览组件 -->
          <!-- <questions-preview></questions-preview> -->
          <el-dialog
            title="题目预览"
            :visible.sync="isPreview"
            width="60%">
            <template>
              <!-- 题型 -->
              <el-form>
                <el-row class="colPreview">
                  <el-col :span="6">
                    <el-form-item label="[题型] :">
                      {{previewList.questionType === '1' ? '单选' : (previewList.questionType === '2' ? '多选' : '简答')}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[编号] :">
                      {{previewList.id}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[难度] :">
                      {{previewList.difficulty === '1' ? '简单' : (previewList.difficulty === '2' ? '一般' : '困难')}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[标签] :">
                      <div class="tagStr">{{previewList.tags}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[学科] :">
                      {{previewList.subjectName}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[目录] :">
                      {{previewList.directoryName}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="[方向] :">
                      {{previewList.direction}}
                    </el-form-item>
                  </el-col>
                </el-row>
                <hr />
                <!-- 题干区 -->
                <el-form-item style="margin: 0; padding: 0;" label="[题干] :"></el-form-item>
                <template>
                  <div style="margin: 0 0 10px 0; color: #0000FF;" v-html="previewList.question"></div>
                  <div>
                    {{previewList.questionType === '1' ? '单选' : (previewList.questionType === '2' ? '多选' : '简答')}}
                    题 选项: (一下选中得选项为正确答案)</div>
                  <!-- 单选 -->
                  <template v-if="previewList.questionType === '1'">
                      <div
                        v-for="item in previewList.options"
                        :key='item.id'
                        style="margin: 10px 0; color: #0000FF;">
                        <el-radio :disabled='item.isRight === 0' v-model="item.isRight" :label="1">{{item.title}}</el-radio>
                      </div>
                  </template>
                  <!-- 多选 -->
                  <template v-if="previewList.questionType === '2'">
                      <div
                        v-for="item in previewList.options"
                        :key='item.id'
                        style="margin: 10px 0; color: #0000FF;">
                        <el-checkbox
                        :disabled='item.isRight === 0'
                        :value="item.isRight === 1">{{item.title}}</el-checkbox>
                      </div>
                  </template>
                  <hr />
                  <!-- 参考答案 -->
                  <el-form-item style="margin: 0; padding: 0;" label="[参考答案] :">
                    <el-button @click='isVideoURL = !isVideoURL' size="small" type="danger" :disabled='previewList.videoURL === ""'>
                      {{isVideoURL ? '关闭视频解析' : '视频答案预览'}}
                    </el-button>
                  </el-form-item>
                  <!-- 视频解析 -->
                  <template v-if="isVideoURL">
                    <video
                      style="margin-top: 5px;"
                      :src='previewList.videoURL'
                      controls
                      muted
                      loop
                      autoplay
                      height="300px"
                      width="400px"></video>
                  </template>
                  <hr />
                  <!-- 答案解析 -->
                  <el-form-item style="margin: 0; padding: 0;" label="[答案解析] :"></el-form-item>
                  <template>
                    <div v-html="previewList.answer === '' ? '无' : previewList.answer"></div>
                  </template>
                  <hr />
                  <!-- 题目备注 -->
                  <el-form-item  style="margin: 0; padding: 0;" label="[题目备注] :"></el-form-item>
                  <template>
                    <div v-html="previewList.remarks === '' ? '无' : previewList.remarks"></div>
                  </template>
                </template>
              </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closedPreview">关 闭</el-button>
            </span>
          </el-dialog>
          <!-- 分页 -->
          <el-pagination
            style="margin-top: 20px; margin-bottom: 20px; float: right;"
            background
            layout="prev, pager, next, sizes, jumper"
            @size-change='sizeChange'
            @current-change='currentChange'
            @prev-click='prevChange'
            @next-click='nextChange'
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size='questionsData.pagesize'
            :current-page='questionsData.page'
            :total="total">
          </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 基础题库
import { list, choiceAdd, remove, detail } from '@/api/hmmm/questions.js'
// 学科
import { list as subjectList } from '@/api/hmmm/subjects.js'
// 目录
import { list as directorysList } from '@/api/hmmm/directorys.js'
// 标签
import { list as tagsList } from '@/api/hmmm/tags.js'
// 录入人
import { list as userList } from '@/api/base/users.js'
// 城市 省 市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 难度 题型 方向
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 时间过滤器
import { parseTimeByString } from '@/filters/index.js'
// 试题预览对话框
// import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'questions-list',
  // components: {
  //   QuestionsPreview
  // },
  data () {
    return {
      // 基础题库表格数据
      questionsTbData: [],
      // 参数
      questionsData: {
        page: 1,
        pagesize: 10,
        tags: null,
        catalogID: null
      },
      // 总量
      total: null,
      // 学科
      subjectList: [],
      // 目录
      directoryList: [],
      // 标签
      tagsList: [],
      // 试题类型
      questionType: [],
      // 难度
      difficulty: [],
      // 方向
      direction: [],
      // 录入人
      creator: [],
      // 省
      provinces: [],
      // 市
      citys: [],
      // 表格 加载中
      tbLoading: false,
      // 是否点击搜索按钮
      isBtn: false,
      // 试题预览
      isPreview: false,
      // 试题详情
      previewList: {},
      // 是否显示视频
      isVideoURL: false,
      // 选中标签组
      tagStr: []
    }
  },
  mounted () {
    this.getBasics()
    this.getSubjects()
    this.getUser()
    this.getConstant()
    this.getCitys()
  },
  methods: {
    // 时间过滤器
    ...parseTimeByString,
    // 获取基础题库
    async getBasics () {
      this.tbLoading = true
      if (this.isBtn) {
        // 将所需标签转换类型
        this.questionsData.tags = this.tagStr.join()
        // 将当前页码置为1
        this.questionsData.page = 1
      }
      try {
        const res = await list(this.questionsData)
        // console.log('基础题库', res)
        this.questionsTbData = res.data.items
        this.total = res.data.counts
        this.tbLoading = false
        this.btnLoading = false
        // 将是否属于搜索状态恢复默认
        this.isBtn = false
      } catch (e) {
        this.tbLoading = false
        this.btnLoading = false
        this.$message.error('加载出错,再刷新看看')
      }
    },
    // 获取学科
    async getSubjects () {
      const res = await subjectList({
        pagesize: 20
      })
      // console.log('学科', res)
      this.subjectList = res.data.items.map(({ id, subjectName }) => {
        return {
          id,
          subjectName
        }
      })
    },
    // 获取目录
    async getDirectorys (val) {
      const res = await directorysList({
        subjectID: val,
        pagesize: 20
      })
      // console.log('目录', res)
      this.directoryList = res.data.items.map(({ id, directoryName }) => {
        return {
          id,
          directoryName
        }
      })
    },
    // 获取标签
    async getTags (val) {
      const res = await tagsList({
        subjectID: val,
        pagesize: 20
      })
      // console.log('标签', res)
      this.tagsList = res.data.items.map(({ id, tagName }) => {
        return {
          id,
          tagName
        }
      })
    },
    // 获取目录及标签
    // 选择学科时 渲染目录及标签
    subjectChange (val) {
      console.log(val)
      this.getDirectorys(val)
      this.getTags(val)
      // 将目录及标签(多选数组)恢复默认值
      this.questionsData.catalogID = null
      this.tagStr = []
    },
    // 获取录入人
    async getUser () {
      const res = await userList()
      // console.log('录入人', res)
      this.creator = res.data.list.map(({ id, username }) => {
        return {
          id,
          username
        }
      })
    },
    // 获取所需常量
    getConstant () {
      this.questionType = questionType
      this.difficulty = difficulty
      this.direction = direction
    },
    // 获取省
    getCitys () {
      this.provinces = provinces()
    },
    // 获取市
    provinceChange (val) {
      // 市区 恢复默认状态
      this.citys = []
      // 城市下拉框发生变化 获取市
      this.citys = citys(val)
    },
    // 清空城市时置空市区
    provincesClear () {
      this.questionsData.city = ''
    },
    // 重置表单
    reset () {
      this.questionsData = {
        page: 1,
        pagesize: 10,
        tags: '',
        catalogID: null
      }
      // 置空标签-多选(数组)
      this.tagStr = []
      // 置空目录
      this.directoryList = []
      // 置空获取到的标签列表 市区
      this.tagsList = []
      this.citys = []
      this.getBasics()
    },
    // 搜索题库
    async searchQuestion () {
      this.isBtn = true
      this.getBasics()
    },
    // 跳转编辑界面
    editQuestion (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 新增
    addQuestion () {
      this.$router.push('/questions/new')
    },
    // 加入精选
    addFine (id) {
      const data = {
        id,
        choiceState: 1
      }
      // 询问框
      this.$confirm('嘿,你要把我加入精选吗!!', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await choiceAdd(data)
            this.$message.success('加入成功,我也是精选得一份子了')
            this.$router.push('/questions/choice')
          } catch (e) {
            this.$message.error('出错了呢,不再尝试一次了吗??')
          }
        })
        .catch(() => {
          this.$message.error('知道了,我不配!!')
        })
    },
    // 删除
    delQuestion (data) {
      // 询问框
      this.$confirm('确定要删除吗,存货不多了呢!!', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove(data)
            this.$message.success('删除成功,数据又少了一条')
            this.getBasics()
          } catch (e) {
            this.$message.error('出错了呢!!!')
          }
        })
        .catch(() => {})
    },
    // 预览题型详情
    async previewQuestion (data) {
      // 将是否播放视频恢复默认
      this.isVideoURL = false
      // 显示预览框
      this.isPreview = true
      try {
        // 获取题型详情
        const res = await detail(data)
        // console.log('详情', res)
        this.previewList = res.data
      } catch (e) {
        this.$message.error('加载出错了呢!!!再刷新看看哇!')
      }
    },
    // 关闭预览
    closedPreview () {
      this.isPreview = false
      this.isVideoURL = false
    },
    // 每页条数改变
    sizeChange (val) {
      this.questionsData.pagesize = val
      this.getBasics()
    },
    // 页码改变
    currentChange (val) {
      console.log(val)
      this.questionsData.page = val
      this.getBasics()
    },
    prevChange (val) {
      console.log(val)
      this.questionsData.page = val
      this.getBasics()
    },
    nextChange (val) {
      console.log(val)
      this.questionsData.page = val
      this.getBasics()
    }
  }
}
</script>

<style scoped>
  /deep/ .el-dialog__body {
    padding: 10px 10px 10px 20px;
  }
  .colPreview /deep/ .el-col-6 {
    height: 30px;
  }
  /* 预览区标签单行文本溢出显示省略号 */
  .tagStr {
    /* 强行一行显示 */
    white-space:nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 溢出部分用...(省略号)显示 */
    text-overflow: ellipsis;
  }
</style>
